<template>
  <div id="myCollection">
    <el-card class="box-card">
      <el-row :gutter="20" style="display: flex; align-items: center;">
        <el-col :span="5" style="display: flex; align-items: center;">
          <!-- 曲线类型:
          <el-select v-model="curve" placeholder="请选择" style="width: 60%" size="mini" @change="loadData" filterable clearable>
            <el-option v-for="item in curveOptions1" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select> -->
          <div class="curveSelect">
            <span class="demonstration">曲线类型：</span>
            <el-cascader v-model="curve" :options="curveOptions" @change="loadData" class="cascaderDiv" :show-all-levels="false" filterable clearable></el-cascader>
          </div>
        </el-col>
        <el-col :span="5">
          <el-button type="primary" size="mini" @click="compareInfo()">对比具体信息</el-button>
        </el-col>
      </el-row>
      <el-table ref="collectTable" :data="parameterList" height="600px" style="margin: 10px 0 10px" @select="parameterSelect" border>
        <el-table-column label-class-name="DisabledSelection" type="selection" fixed="left"> </el-table-column>
        <el-table-column align="center" label="名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="样品编号" prop="parameterNum" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="牌号" prop="grade" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="测量条件类型" prop="measurementType" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="样品规格" prop="specification" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" label="样品基本参数类型" prop="parameterType" show-overflow-tooltip></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="250px">
          <template slot-scope="scope">
            <el-button @click="querySpecificInfo(scope.row)" size="mini" type="primary" plain>查询具体信息</el-button>
            <el-divider direction="vertical"></el-divider>
            <el-popconfirm placement="top" width="160" confirm-button-text="确定" cancel-button-text="取消" @cancel="unCollectVisible = false" @confirm="unCollect(scope.row), (unCollectVisible = false)" title="确定取消收藏吗？" icon-color="red" v-model="unCollectVisible">
              <el-button slot="reference" size="mini" type="danger" plain>取消收藏</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="queryInfo.pageNum" :page-sizes="[10, 20]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </el-card>

    <!-- 查询具体信息弹窗 -->
    <el-dialog title="查询具体信息" :visible.sync="querySpecificInfoType" width="80%" :show-close="false" :close-on-click-modal="false">
      <collMeasureSelect ref="collMeasureSelect" :vIfType="vIfType" :importDataType="type + '性能'"></collMeasureSelect>

      <span slot="footer" class="dialog-footer">
        <el-button type="danger" size="small" style="margin-right: 20px" @click="closeQuery()">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { Message } from 'element-ui'
import collMeasureSelect from './components/collMeasureSelect.vue'
export default {
  components: {
    collMeasureSelect
  },
  data() {
    return {
      unCollectVisible: false,
      vIfType: {},
      type: '',
      curveType: '',
      currentCheckedNum: 0,
      currentCheckedData: [],

      parameterList: [],
      querySpecificInfoType: false,
      // 选择曲线类型
      curve: '',
      curveTypes: '',
      // 曲线类型
      curveOptions: [
        {
          value: '软磁性能曲线',
          label: '软磁性能曲线',
          children: [
            {
              label: '软磁静态原始波形',
              value: '软磁静态原始波形'
            },
            {
              label: '软磁静态磁化曲线',
              value: '软磁静态磁化曲线'
            },
            {
              label: '软磁静态磁滞回线',
              value: '软磁静态磁滞回线'
            },
            {
              label: '软磁静态铁损曲线',
              value: '软磁静态铁损曲线'
            },
            {
              label: '软磁动态原始波形',
              value: '软磁动态原始波形'
            },
            {
              label: '软磁动态磁化曲线',
              value: '软磁动态磁化曲线'
            },
            {
              label: '软磁动态磁滞回线',
              value: '软磁动态磁滞回线'
            },
            {
              label: '软磁动态铁损曲线',
              value: '软磁动态铁损曲线'
            },
          ]
        },
        {
          value: '永磁性能曲线',
          label: '永磁性能曲线',
          children: [
            {
              label: '永磁静态原始波形',
              value: '永磁静态原始波形'
            },
            {
              label: '永磁静态磁滞回线',
              value: '永磁静态磁滞回线'
            },
            {
              label: '永磁静态退磁曲线',
              value: '永磁静态退磁曲线'
            },
          ]
        },
        {
          value: '导电性能曲线',
          label: '导电性能曲线',
          children: [
            {
              label: '导电静态伏安曲线',
              value: '导电静态伏安曲线'
            },
            {
              label: '导电静态电阻曲线',
              value: '导电静态电阻曲线'
            },
            {
              label: '导电静态电阻率曲线',
              value: '导电静态电阻率曲线'
            },
            {
              label: '导电静态电导率曲线',
              value: '导电静态电导率曲线'
            }
          ]
        },
      ],
      curveOptions1: [
        {
          label: '软磁静态原始波形',
          value: '软磁静态原始波形'
        },
        {
          label: '软磁静态磁化曲线',
          value: '软磁静态磁化曲线'
        },
        {
          label: '软磁静态磁滞回线',
          value: '软磁静态磁滞回线'
        },
        {
          label: '软磁静态铁损曲线',
          value: '软磁静态铁损曲线'
        },
        {
          label: '软磁动态原始波形',
          value: '软磁动态原始波形'
        },
        {
          label: '软磁动态磁化曲线',
          value: '软磁动态磁化曲线'
        },
        {
          label: '软磁动态磁滞回线',
          value: '软磁动态磁滞回线'
        },
        {
          label: '软磁动态铁损曲线',
          value: '软磁动态铁损曲线'
        },
        {
          label: '永磁静态原始波形',
          value: '永磁静态原始波形'
        },
        {
          label: '永磁静态磁滞回线',
          value: '永磁静态磁滞回线'
        },
        {
          label: '永磁静态退磁曲线',
          value: '永磁静态退磁曲线'
        },
        {
          label: '导电静态伏安曲线',
          value: '导电静态伏安曲线'
        },
        {
          label: '导电静态电阻曲线',
          value: '导电静态电阻曲线'
        },
        {
          label: '导电静态电阻率曲线',
          value: '导电静态电阻率曲线'
        },
        {
          label: '导电静态电导率曲线',
          value: '导电静态电导率曲线'
        }
      ],
      /********分页相关数据********/
      queryInfo: {
        pageNum: 1,
        pageSize: 10,
        userId: JSON.parse(localStorage.getItem('pro__Login_Userinfo')).value.id
      },
      total: 10
      /********分页相关数据********/
    }
  },
  created() {},
  methods: {
    //对比具体信息
    compareInfo() {
      if (this.currentCheckedNum < 2) {
        Message({ message: '请勾选两条及两条以上数据进行对比！', type: 'warning' })
      } else {
        //先进行数据样品规格比较，样品规格不相同给予提示
        for (let i = 0; i < this.currentCheckedData.length - 1; i++) {
          if (this.currentCheckedData[i].specification != this.currentCheckedData[i + 1].specification) {
            Message({ message: '样品规格不相同，无法进行比较！', type: 'warning' })
            return false
          }
        }

        //样品规格相同后，再查询每条数据的测量数据
        this.querySpecificInfoType = true
        var type = this.curve[1].slice(0, 2)
        this.type = type
        var curveType = this.curve[1].slice(4)
        var tableData = []
        for (let j = 0; j < this.currentCheckedData.length; j++) {
          this.axios({
            baseURL: 'http://59.172.104.174:30669',
            url: '/collectTable/measurmentInfo',
            method: 'POST',
            data: {
              userId: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id,
              username: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.username,
              measurementType: this.curve[1],
              measurementId: this.currentCheckedData[j].measurementId,
              specification: this.currentCheckedData[j].specification,
              parameterNum: this.currentCheckedData[j].parameterNum,
              parameterId: this.currentCheckedData[j].parameterId,
              parameterType: type + '样品基本参数',
              name: this.currentCheckedData[j].name
            }
          }).then(res => {
            var vIfType = {
              tooltipType: false,
              exportMeaCondType: false,
              pageType: false,
              dropDownType: false
            }
            // var externalDataSourceFlag = true
            var curve = ''
            var display = ''
            var sampleSize = ''
            var productId = ''
            this.vIfType = vIfType
            curve = this.curve[1].slice(4)
            display = this.curve[1].slice(2, 4)
            sampleSize = this.currentCheckedData[j].specification
            productId = this.currentCheckedData[j].parameterId
            console.log('this.currentCheckedData[j]', this.currentCheckedData[j])
            tableData.push(res.data.result.object)
            if (j == this.currentCheckedData.length - 1) {
              this.$refs.collMeasureSelect.otherTransfer(tableData, curve, display, sampleSize, productId)
            }
          })
        }
      }
    },

    // 取消收藏
    unCollect(row) {
      var type = this.curve[1].slice(0, 2)
      this.type = type
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/collectTable/cancelCollect',
        method: 'POST',
        data: {
          userId: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id,
          username: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.username,
          measurementType: this.curve[1],
          measurementId: row.measurementId,
          specification: row.specification,
          parameterNum: row.parameterNum,
          grade: row.grade,
          parameterId: row.parameterId,
          parameterType: type + '样品基本参数',
          name: row.name
        }
      }).then(res => {
        if (res.data.code == 200) {
          this.loadData()
          Message({ message: '取消收藏成功！', type: 'success' })
        } else {
          Message({ message: '取消收藏失败！', type: 'error' })
        }
      })
    },

    querySpecificInfo(row) {
      this.querySpecificInfoType = true
      var type = this.curve[1].slice(0, 2)
      this.type = type
      var curveType = this.curve[1].slice(4)
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/collectTable/measurmentInfo',
        method: 'POST',
        data: {
          userId: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.id,
          username: JSON.parse(window.localStorage.getItem('pro__Login_Userinfo')).value.username,
          measurementType: this.curve[1],
          measurementId: row.measurementId,
          specification: row.specification,
          parameterNum: row.parameterNum,
          parameterId: row.parameterId,
          parameterType: type + '样品基本参数',
          name: row.name
        }
      }).then(res => {
        var vIfType = {
          tooltipType: false,
          exportMeaCondType: false,
          pageType: false,
          dropDownType: false
        }
        // var externalDataSourceFlag = true
        var curve = ''
        var display = ''
        var sampleSize = ''
        var productId = ''
        this.vIfType = vIfType
        curve = this.curve[1].slice(4)
        display = this.curve[1].slice(2, 4)
        sampleSize = row.specification
        productId = row.parameterId
        var tableData = []
        tableData.push(res.data.result.object)
        this.$refs.collMeasureSelect.otherTransfer(tableData, curve, display, sampleSize, productId)
      })
    },
    closeQuery() {
      this.querySpecificInfoType = false
    },

    parameterSelect(rows) {
      console.log('rows', rows)
      this.currentCheckedNum = rows.length
      this.currentCheckedData = rows
    },

    /********分页相关函数******* */
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize
      this.loadData()
    },
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage
      this.loadData()
    },
    /********分页相关函数******* */

    loadData() {
      console.log('this.curve', this.curve)
      console.log('this.curve[1]', this.curve[1])
      this.axios({
        baseURL: 'http://59.172.104.174:30669',
        url: '/collectTable/userCollection',
        method: 'POST',
        data: {
          userId: this.queryInfo.userId,
          pageNum: this.queryInfo.pageNum,
          pageSize: this.queryInfo.pageSize,
          parameterType: '',
          measurementType: this.curve[1]
        }
      }).then(res => {
        this.parameterList = res.data.result.list.records
        this.total = res.data.result.list.total
      })
    }
  }
}
</script>

<style scoped>
.box {
  margin-top: 10px;
  display: flex;
  /* justify-content: space-between; */
}
.el-divider--horizontal {
  font-weight: 100;
  display: block;
  height: 1px;
  width: 100%;
  margin: 10px 0;
}
/*去除顶部标头的选择框*/
.el-table >>> .DisabledSelection .cell .el-checkbox__inner {
  display: none;
  position: relative;
}
</style>
<style lang="less" scoped>
#myCollection{
  .curveSelect {
    font-size: 12px !important;
    display: flex;
    align-items: center;
    .el-cascader {
      font-size: 12px !important;
      height: 28px !important;
      line-height: 28px !important;
    }
    /deep/.el-cascader .el-input .el-input__inner {
      font-size: 12px !important;
      height: 28px !important;
      line-height: 28px !important;
    }
  }
}
</style>
